<template>
    <div class="forget">
        <div class="header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
        </div>
        <div class="title textColor">{{ $t('重置登录密码') }}</div>
        <div class="flex re-tab text-grey">
            <div :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('邮箱') }}</div>
            <!-- <div :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('手机号') }}</div> -->
            <div :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('谷歌验证') }}</div>
        </div>

        <ExInput :label="$t('账号')" :placeholderText="$t('请输入账号')" v-model.trim="account" :dialCode="dialCode"
            @selectArea="onSelectArea" :area="isArea" :icon="icon" />
        <div class="btn" @click="next">{{ $t('下一步') }}</div>
        <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)">
        </nationality-list>
    </div>
</template>

<script>
import ExInput from "@/components/ex-input";
import Axios from "@/API/userCenter.js";
import nationalityList from '../authentication/components/nationalityList.vue'
export default {
    props: {

    },
    components: {
        ExInput,
        nationalityList
    },
    data() {
        return {
            account: '',
            activeIndex: 0,
            isArea: false,
            dialCode: 0, //电话号前缀
            icon: ''
        }
    },
    mounted() {

    },
    methods: {
        changeIndex(index) {
            this.activeIndex = index;
            if (index == 1) {
                this.isArea = true
            } else {
                this.isArea = false
            }
        },
        next() {
            if (this.account == "") {
                this.$toast(this.$t("请输入账号"))
                return;
            }
            this.getUserNameVerifTarget()

        },
        getUserNameVerifTarget() {

            let type;
            if (this.activeIndex == 0) {
                type = 2
            } else if (this.activeIndex == 1) {
                type = 1
            } else if (this.activeIndex == 2) {
                type = 3
            }
            Axios.getUserNameVerifTarget({
                username: type == 1 ? `${this.dialCode}${this.account}` : this.account,
                verifcode_type: type  //验证类型 1手机 2 邮箱 3谷歌验证器
            }).then((res) => {
                if (type == 1 && !res.data.phone_authority) {
                    this.$toast(this.$t('未绑定手机号'));
                    return false
                } else if (type == 2 && !res.data.email_authority) {
                    this.$toast(this.$t('未绑定邮箱'));
                    return false
                } else if (type == 3 && !res.data.google_auth_bind) {
                    this.$toast(this.$t('未绑定谷歌验证器'));
                    return false
                }
                let account;
                if (type == 1) {
                    account = res.data.phone
                } else if (type == 2) {
                    account = res.data.email
                }
                this.$router.push({ name: 'safeVerify', query: { type: type, account: account, username: this.account } })
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        onSelectArea() {
            this.openBtn();
        },
        //打开国家列表底部弹窗
        openBtn() {
            this.$refs.controlChild.open();
        },
        getName(params) {
            this.icon = params[1];
            this.dialCode = params[2];
        },
    }
}
</script>

<style lang="scss" scoped>
.forget {
    width: 100%;
    box-sizing: border-box;
    padding: 30px;
    font-size: 26px;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 66px;
}

.re-tab {
    margin-bottom: 44px;

    div {
        padding: 0 36px;
        height: 68px;
        line-height: 68px;
        text-align: center;
        border-radius: 8px;
        margin-right: 20px;
    }

    .active {
        @include themify() {
            background: themed("cont_background");
        }
    }
}

.btn {
    background: #000;
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 35px;
    margin-top: 36px;
    border-radius: 10px;
}
</style>